<template>
<div class="app-container">
  <div class="form-box">
    <el-form ref="form" :rules="rules" model="currentRecord" label-width="120px">
      <el-row style="display: flex; justify-content: space-between;">
        <el-form-item label="患者来源" prop="origin">
          <el-input
            v-model="record.origin"
            placeholder="请输入患者来源"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="费用类别" prop="expenseCategory">
          <el-input
            v-model="record.expenseCategory"
            placeholder="请输入费用类别"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="费用" prop="expense">
          <el-input
            v-model="record.expense"
            placeholder="请输入费用"
            clearable
            style="width: 200px"
          />
        </el-form-item>
      </el-row>
      <el-row style="display: flex; justify-content: space-between;">
        <el-form-item label="就诊医院" prop="hospital">
          <el-input
            v-model="record.hospital"
            placeholder="请输入就诊医院名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="科室" prop="dept">
          <el-input
            v-model="record.dept"
            placeholder="请输入科室名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="医生" prop="doctor">
          <el-input
            v-model="record.doctor"
            placeholder="请输入医生姓名"
            clearable
            style="width: 200px"
          />
        </el-form-item>
      </el-row>
      <el-row style="display: flex; justify-content: space-between;">
        <el-form-item label="入院时间" prop="admissionTime">
          <el-date-picker
            v-model="record.admissionTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            style="width: 200px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手术时间" prop="surgeryTime">
          <el-date-picker
            v-model="record.surgeryTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            style="width: 200px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出院时间" prop="leaveTime">
          <el-date-picker
            v-model="record.leaveTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            style="width: 200px">
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row style="display: flex; justify-content: left;">
        <el-form-item label="病床号" prop="bedNumber">
          <el-input
            v-model="record.bedNumber"
            placeholder="请输入就诊医院名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
      </el-row>
      <el-row style="display: flex; justify-content: left;">
        <el-form-item label="主要病症诉求" prop="appeal">
          <el-input
            v-model="record.appeal"
            type="textarea"
            style="width: 700px"
            placeholder="请输入内容"/>
        </el-form-item>
      </el-row>
      <el-row style="display: flex; justify-content: left;">
        <el-form-item label="个人病史描述" prop="message">
          <el-input
            v-model="record.message"
            type="textarea"
            style="width: 700px"
            placeholder="请输入内容"/>

        </el-form-item>
      </el-row>
      <el-row style="display: flex; justify-content: left;">
        <el-form-item label="既往病逝" prop="medicalHistoryDesc">
          <el-input
            v-model="record.medicalHistoryDesc"
            type="textarea"
            style="width: 700px"
            placeholder="请输入内容"/>

        </el-form-item>
      </el-row>
    </el-form>
    <div class="file-box">
      <div v-for="(item,index) in record.resourceList"  :key="deal">
        <img :src="item.imgPath" class="img"/>
      </div>
    </div>
  </div>
  <div class="dialog-footer">
    <el-button v-if="record.state !=='1' "type="primary" @click="submitForm">提 交</el-button>
    <el-button v-if="record.state !=='1'" @click="cancel">取 消</el-button>
  </div>
</div>
</template>

<script>
    import { getRecordByUserId, delRecord, updateRecord, addRecord, getRecord, getRecordByUserIdAndState } from "@/api/wechat/record";
    import { changeUserState } from "@/api/wechat/user";
    export default {
        name: "approval",
        data() {
            return{
                title: 'Medical Record',
                userId: undefined,
                record:undefined,
                // 表单校验
                rules: {
                },
                queryParams:{
                    userId: undefined,
                    state: 0,
                }
            }
        },
        created() {
            const userId = this.$route.params && this.$route.params.userId;
            if (userId !== undefined && userId != 0) {
                this.userId = userId
                this.queryParams.userId = userId
                this.getRecordByUserIdAndState()
            }
        },
        methods: {
            /** 查询患者列表 */
            getRecordByUserIdAndState() {
                getRecordByUserIdAndState(this.queryParams).then(response => {
                    this.record = response.data
                });
            },

            /** 取消按钮 */
            cancel() {
                this.reset();
            },
            // 表单重置
            /** 表单重置 */
            reset() {
                this.currentRecord = this.record;
                this.resetForm("form");
            },

            /** 提交按钮 */
            submitForm: function() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.record.recordId != undefined) {
                            this.record.state = '1'
                            updateRecord(this.record).then(response => {
                                this.$modal.msgSuccess("提交成功");
                                this.updateUserState(this.record.userId,"1")
                                this.getRecordByUserId();

                            });
                        }
                    }
                });
            },
            /** 更新用户状态**/
            updateUserState: function(userId,state){
                changeUserState(userId,state).then(response =>{

                })
            }

        }
    }
</script>

<style scoped>

</style>
